<template>
  <div class="common-layout">
    <el-container>
      <el-header>
          <Header />
        </el-header>
      <el-container>
        <el-aside width="180px">
        <Layout />
      </el-aside>
        <el-main>
          <div class="main flex flex-row">
            <div class="left shadow-lg">
              <el-tree highlight-current class="tree treeBom" :default-expanded-keys="[2, 3]"
                @node-click="handleNodeClick" node-key="id" :data="treeData"></el-tree>
            </div>
            <div class="content-box">
              <div class="filter p-4">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                  <el-form-item label="设备名称">
                    <el-input v-model="formInline.deviceName" readonly />
                  </el-form-item>
                  <el-form-item label="任务名称">
                    <el-input v-model="formInline.itemName" clearable />
                  </el-form-item>
                  <el-form-item label="需用人数">
                    <el-input v-model="formInline.peopleCount" clearable />
                  </el-form-item>
                  <el-form-item label="完成日期">
                    <el-date-picker v-model="formInline.startDate" type="daterange" unlink-panels range-separator="To"
                      start-placeholder="开始日期" end-placeholder="结束日期" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div class="table p-4">
                <div class="box">
                  <el-table :data="tableData" stripe style="width: 100%;height: 100%;">
                    <el-table-column prop="deviceName" label="设备名称"  width="180" />
                    <el-table-column prop="itemName" label="维修任务名称" width="180"/>
                    <el-table-column prop="maker" label="编制人" />
                    <el-table-column prop="makeTime" label="编制时间" width="180" />
                    <el-table-column prop="checkState" label="审核状态">
                      <template #default="scope">       
                        <el-tag  :type="scope.row.checkState == '审核中'? 'primary' : 'success'">{{scope.row.checkState}}</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="checkPeople" label="审核人" />
                    <el-table-column prop="checkTime" label="审核时间" width="180" />
                    <el-table-column prop="checkResult" label="审核结果" width="180" />
                    <el-table-column fixed="right" label="操作" width="120">
                      <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="editRow(scope.row)">
                          查看
                        </el-button>
                        <el-button link type="primary" size="small" @click.prevent="editRow(scope.row)">
                          删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script setup lang="ts">
import { ref } from "vue"
const treeData = ref([
  {
    label: '连铸设备', id: 1,
    children: [
      {
        label: '修磨区域',
        id: 2,
        children: [
          { label: '修磨辅助设备油压油箱', id: 4, code: '210458P01' },
          { label: '修磨油压系统油箱', id: 5, code: '210457P01' },
          { label: '手清场上表面输送机', id: 6, code: '210434M06' },
          {
            label: '纵向切割机', id: 7, code: '210464M06', children: [
              { label: '纵向切割机管路', id: 8, code: '210464M06J007' },
              { label: '纵向切割机回火器', id: 9, code: '210464M06J001' },
              { label: '纵向切割机煤气调节器', id: 10, code: '210464M06J004' },
              { label: '纵向切割机煤气过滤器', id: 11, code: '210464M06J002' }
            ]
          },

        ],
      },
      {
        label: '3CC区域',
        id: 3,
        children: [{
          label: '3CC移载机油压油箱',
          code: '420229P01',
          id: 12
        },
        {
          label: '3CC精整油压油箱 ',
          code: '420230P01',
          id: 13
        },
        ]
      },
    ],
  },
]);


const tableData = ref([
  {
    deviceName: '修磨油压系统油箱',
    itemName:'修理',
    maker: '张远',
    makeTime: '2024-02-03',
    checkState:'审核中',
    checkPeople:'李明',
    checkTime:'2024-02-04',
    checkResult:'审核完毕',
  },
  {
    deviceName: '修磨油压系统油箱',
    itemName:'修理',
    maker: '张远',
    makeTime: '2024-02-03',
    checkState:'已审核',
    checkPeople:'李明',
    checkTime:'2024-02-04',
    checkResult:'审核完毕',
  },
  {
    deviceName: '修磨油压系统油箱',
    itemName:'修理',
    maker: '张远',
    makeTime: '2024-02-03',
    checkState:'已审核',
    checkPeople:'李明',
    checkTime:'2024-02-04',
    checkResult:'审核完毕',
  },
  {
    deviceName: '修磨油压系统油箱',
    itemName:'修理',
    maker: '张远',
    makeTime: '2024-02-03',
    checkState:'已审核',
    checkPeople:'李明',
    checkTime:'2024-02-04',
    checkResult:'审核完毕',
  },
  {
    deviceName: '修磨油压系统油箱',
    itemName:'修理',
    maker: '张远',
    makeTime: '2024-02-03',
    checkState:'已审核',
    checkPeople:'李明',
    checkTime:'2024-02-04',
    checkResult:'审核完毕',
  },
  {
    deviceName: '修磨油压系统油箱',
    itemName:'修理',
    maker: '张远',
    makeTime: '2024-02-03',
    checkState:'已审核',
    checkPeople:'李明',
    checkTime:'2024-02-04',
    checkResult:'审核完毕',
  },
  {
    deviceName: '修磨油压系统油箱',
    itemName:'修理',
    maker: '张远',
    makeTime: '2024-02-03',
    checkState:'已审核',
    checkPeople:'李明',
    checkTime:'2024-02-04',
    checkResult:'审核完毕',
  },
  {
    deviceName: '修磨油压系统油箱',
    itemName:'修理',
    maker: '张远',
    makeTime: '2024-02-03',
    checkState:'已审核',
    checkPeople:'李明',
    checkTime:'2024-02-04',
    checkResult:'审核完毕',
  },
  {
    deviceName: '修磨油压系统油箱',
    itemName:'修理',
    maker: '张远',
    makeTime: '2024-02-03',
    checkState:'已审核',
    checkPeople:'李明',
    checkTime:'2024-02-04',
    checkResult:'审核完毕',
  },
])
const formInline = reactive({
  deviceName: '',
  itemName: '',
  peopleCount: '',
  startDate: '',
  endDate: ''
})
const optionVisible = ref(false)
const fileTitle = ref('')

const editRow = (row) => {
  console.log(row)
  fileTitle.value = row.name
  optionVisible.value = true
}
const handleNodeClick = () => {

}
const onSubmit = () => {

}
</script>

<style lang="less" scoped>
.common-layout {
  height: 100%;

  .el-container {
    height: 100%;
  }

  .el-header {
    padding: 0;
  }
}

.main {
  height: 100%;

  .left {
    width: 200px;
  }

  .content-box {
    height: 100%;
    flex: 1;
    width: calc(100% - 200px);
    display: flex;
    flex-direction: column;

    .filter {
      height: auto;
      width: 100%;
    }

    .table {
      flex: 1;
      // height: calc(100% - 182px);
      position: relative;
      height: 0;
      .box{
        position: absolute;
        width: 100%;
        height: 100%;
      }
    }
  }
}
:deep(.cell){
  text-align: center;
}
</style>
